<%= render :partial=> 'layouts/datatable'%>
<table id="list_table" cellpadding="5" cellspacing="0" border="2" width="100%">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Middle Name</th>
      <th>last Name</th>
      <th>Email Address</th>
       <th>Active user</th>
      <th>Convert to manager</th>
    <th>Role</th>
    </tr>
  </thead>
    <tbody>
    <% @employees.each do |employee| %>
      <tr>
        <td><%= employee.first_name  %></td>
        <td><%= employee.middle_name  %></td>
        <td><%= employee.last_name  %></td>
        <td><%= employee.email  %></td>
        <td style="cursor:pointer;" onclick="javascript:toggle_status(<%= employee.id %>);" id=active_status<%= employee.id %> ><%= employee.is_active.to_s.humanize  %></td>
        <td style="cursor:pointer" onclick="javascript:toggle_manager(<%= employee.id %>);"><div id=manager_status<%= employee.id %> ><%= employee.is_manager.to_s.humanize  %></div></td>
        <td><%= fetch_employee_role(employee) %></td>
     </tr>
      <% end %>
    </tbody>
</table>

<script>
function toggle_status(id){
  $('#active_status'+id).load('/change_active_status/'+id +'/employee #active_status');
}

function toggle_manager(id){

 $('#manager_status'+id).load('/convert_to_manager/'+id +'/employee #manager_status');
  $('#manager_status'+id).live("click", function() {
        var tdr = $(this).parent();
 role = $(this).parent().text()

if ( role == "True" )
{
    tdr.next().text("Employee");
}
else
{
 tdr.next().text("Manager");
}

 
});

}

</script>


